<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Playfair+Display:wght@400;600;900&display=swap" rel="stylesheet">

<style>

/* ===== BASE ===== */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}


body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;

  background:
    radial-gradient(circle at top left, rgba(198,180,255,.35), transparent 35%),
    radial-gradient(circle at bottom right, rgba(160,210,255,.35), transparent 35%),
    #f5f3fb;

  color: #2e2a45;
  line-height: 1.6;
  text-align: center;
}



h1, h2, h3, h4 {

  font-family: 'Playfair Display', serif;
  font-weight: 600;

  color: #33245f;

}



a {
  color: #5b4b9c;
  text-decoration: none;
}



.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}





/* =========================
        HEADER
========================= */

.header-container {

display:flex;

align-items:center;

justify-content:space-between;

padding:12px 35px;

position:sticky;

top:0;

z-index:999;

background:white;

border-bottom:1px solid #e8e2f5;

box-shadow:
0 8px 25px rgba(50,40,100,.12);

}


/* =========================
        HAMBURGER
========================= */

.hamburger {

display:none;

cursor:pointer;

}


.hamburger div {

width:25px;

height:3px;

margin:5px;

border-radius:20px;

background:

linear-gradient(
90deg,
#9b7cff,
#7ddcff
);

}


/* =========================
          LOGO
========================= */


.logo {

display:flex;

align-items:center;

flex-shrink:0;

}


.logo img {

height:75px;

display:block;

filter:
drop-shadow(
0 5px 12px rgba(80,50,130,.18)
);

}



/* =========================
       DESKTOP NAV
========================= */


.desktop-nav {

margin-left:auto;

}


.desktop-nav ul {

display:flex;

align-items:center;

gap:18px;

list-style:none;

margin:0;

padding:0;

}


.desktop-nav a {

text-decoration:none;

color:#40365c;

font-size:15px;

font-weight:600;

padding:8px 12px;

border-radius:20px;

transition:.25s;

}


.desktop-nav a:hover {

background:#f1ebff;

color:#8b6cf0;

}



/* =========================
       MOBILE NAV
========================= */


.mobile-nav {

display:none;

position:absolute;

top:75px;

left:15px;

right:15px;

background:white;

padding:20px;

border-radius:25px;

box-shadow:

0 20px 45px rgba(50,40,100,.18);

}



.mobile-nav ul {

list-style:none;

padding:0;

margin:0;

display:flex;

flex-direction:column;

gap:12px;

}


.mobile-nav a {

display:block;

padding:12px;

border-radius:18px;

background:#f8f5ff;

color:#40365c;

font-weight:600;

}



.mobile-nav.active {

display:block;

}


/* =========================
       MOBILE
========================= */

@media(max-width:900px){


.header-container{

display:flex;

align-items:center;

justify-content:center;

position:relative;

padding:10px 18px;

}


/* hamburger sits left */

.hamburger{

display:block;

position:absolute;

left:18px;

top:50%;

transform:translateY(-50%);

}


/* logo stays centered */

.logo{

margin:0 auto;

}


.logo img{

height:52px;

display:block;

}


/* mobile dropdown */

.mobile-nav{

top:70px;

left:15px;

right:15px;

}


.desktop-nav{

display:none;

}


}

/* =========================
          HERO
========================= */


.hero {

 position:relative;

 height:100vh;

 width:100%;


 display:flex;

 justify-content:center;

 align-items:center;


 overflow:hidden;

}



.hero-video {


 position:absolute;

 inset:0;


 width:100%;

 height:100%;


 object-fit:cover;

 z-index:1;


}




.hero::after {


 content:"";

 position:absolute;

 inset:0;


 z-index:1;


 background:


 linear-gradient(

 rgba(25,15,60,.35),

 rgba(80,70,130,.25)

 );


}





.hero-text {


 position:relative;

 z-index:2;


 max-width:850px;


 padding:0 20px;


 color:white;


 font-family:'Playfair Display',serif;


}



.hero-text h1 {


 font-size:clamp(2.5rem,6vw,5rem);


 font-weight:900;


 line-height:1.1;


 margin-bottom:20px;


 color:white;



 text-shadow:

 0 8px 30px rgba(0,0,0,.45);


}




.hero-text p {


 font-size:clamp(1.1rem,3vw,1.7rem);


 margin:0;


 color:white;


 text-shadow:

 0 5px 20px rgba(0,0,0,.45);


}
/* ==============================
        INTRO SECTION
================================ */


.intro {

padding:90px 20px;

background:

radial-gradient(circle at top left,
rgba(200,180,255,.45),
transparent 45%),

linear-gradient(
135deg,
#f7f4ff,
#e9f2ff
);


border-radius:35px;


box-shadow:

0 25px 60px rgba(70,50,120,.12);

margin:40px 20px;

}




.intro-wrapper {


max-width:1200px;

margin:auto;


display:flex;

align-items:center;

gap:30px;


flex-wrap:nowrap;

overflow-x:auto;


scroll-snap-type:x mandatory;

-webkit-overflow-scrolling:touch;

}



.intro-wrapper::-webkit-scrollbar {

display:none;

}



.intro-image,
.intro-text {


flex:0 0 auto;


width:80vw;

max-width:450px;


scroll-snap-align:start;

}





.intro-image img {


width:100%;

border-radius:28px;


box-shadow:

0 20px 40px rgba(50,40,100,.18);


}



.intro-text {


padding:35px;


background:

rgba(255,255,255,.45);


backdrop-filter:blur(15px);


border-radius:30px;


border:

1px solid rgba(255,255,255,.6);


}





.intro-text h2 {


font-size:clamp(2rem,5vw,3rem);


color:#3b2c70;


margin-bottom:20px;


}



.intro-text p {


font-size:1.15rem;

color:#443d61;

line-height:1.8;

}





@media(min-width:781px){

.intro-wrapper{

overflow:visible;

justify-content:center;

}


.intro-image,
.intro-text{

width:auto;

flex:1;

}


}




/* ===== WHY RAEROUTES SECTION ===== */
.why-raeroutes {
  padding: 80px 20px;
  text-align: center;
  border-radius: 20px;
  background: linear-gradient(135deg, #f4f0ff, #e7ddff);
  position: relative;
  overflow-x: hidden; /* prevents horizontal overflow */
  overflow-y: hidden; /* prevents vertical overflow for floating circles */
}

/* Floating Circle Background */
.why-raeroutes .floating-circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 120%;
  background:
    radial-gradient(circle, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(circle, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 60%);
  animation: floatGlow 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
  filter: blur(2px);
}

/* Floating Animation Keyframes */
@keyframes floatGlow {
  0%   { transform: translate(-10px, -10px) scale(1); }
  50%  { transform: translate(10px, 15px) scale(1.05); }
  100% { transform: translate(-10px, -10px) scale(1); }
}

/* Section inside wrapper */
.why-section {
  background: linear-gradient(135deg, #f4f0ff, #e7ddff);
  padding: 60px 20px;
}

/* Title */
.why-raeroutes h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #4c3a84;
  margin-bottom: 30px;
  position: relative;
  z-index: 2; /* above floating circles */
}

/* GRID — FIXED MOBILE OVERFLOW */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1000px;
  margin: 40px auto 0 auto;
  overflow-x: auto;     
  padding-bottom: 10px; 
  position: relative;
  z-index: 2; /* above floating circles */
}

.why-grid::-webkit-scrollbar {
  height: 6px;
}

/* ==== MOBILE FIX ==== */
@media (max-width: 768px) {
  .why-grid {
    grid-template-columns: repeat(3, 80%); 
  }

  .why-raeroutes {
    padding: 60px 15px;
  }
}

/* Cards */
.why-card {
  background: linear-gradient(135deg, #e3d4ff, #d9c7ff); /* slightly darker gradient */
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* slightly stronger shadow */
  border: 2px solid rgba(77, 60, 132, 0.4); 
  opacity: 0;                  
  transform: translateY(20px);  
  -webkit-transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  -webkit-transition: opacity 0.7s ease-out, -webkit-transform 0.7s ease-out;
  position: relative;
  z-index: 2; /* above floating circles */
}

.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

.why-card.visible {
  opacity: 1;
  transform: translateY(0);     
  -webkit-transform: translateY(0);
  -webkit-animation: fadeSlideUp 0.7s forwards;
  animation: fadeSlideUp 0.7s forwards;
}

@-webkit-keyframes fadeSlideUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.why-card h3 {
  font-size: 1.15rem;
  margin-top: 10px;
  color: #4a3d77;
  font-weight: 600;
}

.why-card p {
  font-size: 0.92rem;
  margin-top: 8px;
  color: #5d537d;
  line-height: 1.45;
}

/* Icon container */
.why-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 14px auto;
  border-radius: 50%;
  background: rgba(205,180,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 2; /* above floating circles */
}

/* Sparkles stays same but with overflow fixed */
.sparkles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0; /* behind cards */
}

.sparkles span {
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: sparkle 4s linear infinite;
}

@keyframes sparkle {
  0% { transform: translateY(0) scale(1); opacity: 0.8; }
  50% { transform: translateY(-80px) scale(1.3); opacity: 0.5; }
  100% { transform: translateY(0) scale(1); opacity: 0; }
}



/* ==============================
        COLLECTIONS
================================ */


.collections-section h2,
.collections-section .collections {

    position:relative;

    z-index:2;

}

.collections-section {


padding:70px 0;


margin:40px 20px;


background:


linear-gradient(
135deg,
#f3efff,
#e8f5ff
);



border-radius:35px;


overflow:hidden;


}




.collections-section h2 {


font-size:clamp(2rem,5vw,3rem);


color:#3b2c70;


}





.collections {


display:flex;


gap:25px;


overflow-x:auto;


padding:20px;


scroll-snap-type:x mandatory;


-webkit-overflow-scrolling:touch;


}




.collections::-webkit-scrollbar{

display:none;

}




.collection-card {


flex:0 0 260px;


background:


rgba(255,255,255,.55);



backdrop-filter:blur(15px);



border-radius:30px;



padding:15px;


border:

1px solid rgba(255,255,255,.7);



box-shadow:

0 15px 35px rgba(70,50,120,.15);



transition:.35s;



scroll-snap-align:start;


}





.collection-card:hover{


transform:translateY(-10px) scale(1.02);


}





.collection-card img {


border-radius:22px;


width:100%;


}





.collection-card h3 {


font-size:1.5rem;


color:#49378c;


}




.collection-card p {


color:#50496b;


}

/* ===================================
      MINI DAYDREAMS ✨
      Floating Travel Bubbles
=================================== */


.weekly-packages {

padding:90px 20px;

margin:40px 20px;

background:

radial-gradient(
circle at top left,
rgba(198,180,255,.45),
transparent 40%
),

radial-gradient(
circle at bottom right,
rgba(125,220,255,.35),
transparent 40%
),

linear-gradient(
135deg,
#f4efff,
#e8f6ff
);

border-radius:45px;

overflow:hidden;

box-shadow:

0 25px 60px rgba(70,50,120,.12);

}




.weekly-packages h2 {

font-family:'Playfair Display',serif;

font-size:clamp(2rem,5vw,3rem);

color:#3b2c70;

margin-bottom:15px;

}





.weekly-packages > p {

max-width:650px;

margin:0 auto 45px;

color:#62557d;

line-height:1.8;

}





/* =========================
      BUBBLE AREA
========================= */


.packages-grid {

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:55px;

padding:50px 20px;

}





/* =========================
      FLOATING BUBBLES
========================= */


.package-card {


width:330px;

height:330px;


border-radius:50%;


background:

rgba(255,255,255,.45);


backdrop-filter:blur(18px);


display:flex;

flex-direction:column;

align-items:center;

justify-content:center;


text-decoration:none;


position:relative;


overflow:hidden;


box-shadow:

0 25px 60px rgba(70,50,120,.18);


border:

1px solid rgba(255,255,255,.7);


transition:.4s ease;


animation:

floatBubble 6s ease-in-out infinite;

}




.package-card:nth-child(2){

animation-delay:1.5s;

}



.package-card:nth-child(3){

animation-delay:3s;

}





@keyframes floatBubble {


0% {

transform:translateY(0);

}


50% {

transform:translateY(-18px);

}


100% {

transform:translateY(0);

}

}





.package-card:hover {

transform:
translateY(-12px)
scale(1.06);

box-shadow:

0 35px 80px rgba(70,50,120,.28);

}





/* =========================
        IMAGE
========================= */


.package-card img {


width:130px;

height:130px;


object-fit:cover;


border-radius:50%;


border:

5px solid rgba(255,255,255,.8);


box-shadow:

0 15px 35px rgba(70,50,120,.2);


margin-bottom:18px;

}





/* =========================
        TEXT
========================= */


.package-overlay {


text-align:center;

padding:0 40px;

}




.package-overlay h3 {


font-family:'Playfair Display',serif;

font-size:1.15rem;

line-height:1.2;

color:#3b2c70;

margin-bottom:10px;

}




.package-overlay p {


font-size:.78rem;

line-height:1.45;

color:#62557d;

}





/* =========================
        MOBILE SLIDE
========================= */


@media(max-width:768px){


.weekly-packages{

padding:70px 15px;

}



.packages-grid {


justify-content:flex-start;

flex-wrap:nowrap;

overflow-x:auto;

scroll-snap-type:x mandatory;

gap:30px;

padding:40px 20px 60px;


-webkit-overflow-scrolling:touch;

}



.packages-grid::-webkit-scrollbar{

display:none;

}





.package-card {

flex:0 0 280px;

width:280px;

height:280px;

scroll-snap-align:center;

}





.package-card img {

width:105px;

height:105px;

}





.package-overlay {

padding:0 28px;

}




.package-overlay h3{

font-size:1.05rem;

}



.package-overlay p{

font-size:.74rem;

}


}

/* ===================================
        HOT DEALS ✈️
        Floating Travel Tickets
=================================== */


.hot-deals {

padding:90px 20px;

margin:40px 15px;

background:

radial-gradient(
circle at top left,
rgba(198,180,255,.45),
transparent 40%
),

radial-gradient(
circle at bottom right,
rgba(125,220,255,.35),
transparent 40%
),

linear-gradient(
135deg,
#f7f1ff,
#e9f7ff
);

border-radius:45px;

overflow:hidden;

box-shadow:
0 25px 60px rgba(70,50,120,.12);

}




.hot-deals h2 {

font-family:'Playfair Display',serif;

font-size:2.8rem;

color:#3b2c70;

margin-bottom:15px;

}



.hot-deals > p {

max-width:650px;

margin:0 auto 45px;

color:#62557d;

line-height:1.8;

}




/* =========================
     FLOATING SCROLL
========================= */


.hot-deals-scroll {

display:flex;

gap:35px;

overflow-x:auto;

padding:40px 20px 50px;

scroll-snap-type:x mandatory;

}


.hot-deals-scroll::-webkit-scrollbar{

display:none;

}




/* =========================
        TICKETS
========================= */


.hot-deal-card {


position:relative;


flex:0 0 270px;


scroll-snap-align:center;


background:white;


padding:25px;


border-radius:35px;


box-shadow:

0 25px 50px rgba(70,50,120,.18);


transition:.35s ease;


text-align:center;


overflow:hidden;


}




.hot-deal-card:nth-child(odd){

transform:translateY(-18px)
rotate(-3deg);

}



.hot-deal-card:nth-child(even){

transform:translateY(15px)
rotate(3deg);

}




.hot-deal-card:hover{

transform:

translateY(-12px)
scale(1.04)
rotate(0deg);

}




/* ticket cutouts */

.hot-deal-card::before,
.hot-deal-card::after {


content:"";


position:absolute;


width:35px;

height:35px;


background:

#eef4ff;


border-radius:50%;


top:50%;


transform:translateY(-50%);


z-index:2;

}



.hot-deal-card::before{

left:-18px;

}


.hot-deal-card::after{

right:-18px;

}





/* IMAGE CIRCLE */


.deal-image {


width:110px;

height:110px;


object-fit:cover;


border-radius:50%;


margin:0 auto 15px;


display:block;


border:

6px solid #f3edff;


box-shadow:

0 15px 30px rgba(70,50,120,.18);

}




/* TEXT */


.hot-deal-card h3 {


font-family:'Playfair Display',serif;


font-size:1.45rem;


color:#3b2c70;

}



.hot-deal-card p {


color:#62557d;

font-size:.95rem;

line-height:1.6;

}




/* little divider */

.hot-deal-card span {


display:block;

height:1px;

border-top:2px dashed #d9cfff;

margin:18px 0;

}




/* BUTTON */


.hot-deal-card .button {


display:inline-block;


padding:11px 25px;


background:

linear-gradient(
135deg,
#9b7cff,
#7ddcff
);


color:white;


border-radius:999px;


text-decoration:none;


}




@media(max-width:768px){


.hot-deals{

padding:70px 15px;

}



.hot-deal-card{

flex-basis:240px;

}


}

/* ===================================
      THE ROUTE ROOM - SCRAPBOOK STYLE
=================================== */


.services-gifting {

padding:90px 25px;

margin:40px 20px;

background:
linear-gradient(
180deg,
#faf7ff,
#eef8ff
);

border-radius:40px;

position:relative;

overflow:hidden;

box-shadow:
0 20px 50px rgba(80,60,140,.08);

}


.services-gifting::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(
circle at 20% 20%,
rgba(181,160,255,.15),
transparent 25%
),

radial-gradient(
circle at 80% 70%,
rgba(125,220,255,.15),
transparent 25%
);

pointer-events:none;

}


.services-gifting h2{

position:relative;
z-index:2;

font-family:'Playfair Display',serif;

font-size:3rem;

color:#423178;

text-align:center;

margin-bottom:15px;

}


.services-gifting > p{

position:relative;
z-index:2;

max-width:700px;

margin:auto;

text-align:center;

color:#5f577d;

line-height:1.8;

}


/* ==========================
        CARD ROW
========================== */


.service-scroll{

margin-top:45px;

overflow-x:auto;

}


.service-scroll::-webkit-scrollbar{

display:none;

}



.service-cards{

display:flex;

gap:28px;

max-width:1150px;

margin:auto;

padding:20px 10px;

justify-content:center;

}


/* ==========================
        POSTCARD CARDS
========================== */


.service-card{


flex:1;

max-width:340px;

min-height:400px;


background:#fffdf8;


border-radius:28px;


padding:35px 25px;


text-align:center;


position:relative;


display:flex;

flex-direction:column;

align-items:center;


box-shadow:

0 18px 40px rgba(70,50,120,.12);


transition:.3s ease;


}



.service-card::before{

content:attr(data-emoji);

font-size:3rem;

margin-bottom:15px;

}



.service-card::after{

content:"";

position:absolute;

top:-10px;

left:50%;

transform:
translateX(-50%)
rotate(-4deg);


width:90px;

height:22px;


background:
rgba(255,255,255,.8);


border:
1px solid rgba(0,0,0,.05);

}



.service-card:nth-child(2){

transform:rotate(1deg);

}


.service-card:nth-child(3){

transform:rotate(-1deg);

}



.service-card:hover{

transform:
translateY(-8px)
rotate(0deg);


box-shadow:

0 25px 55px rgba(70,50,120,.2);

}



/* ==========================
        CONTENT
========================== */


.service-card h3{

font-family:'Playfair Display',serif;

font-size:1.5rem;

color:#47358e;

margin-bottom:15px;

}


.service-card p{

color:#5f577d;

line-height:1.7;

font-size:.95rem;

}


/* ==========================
        BUTTONS
========================== */


.service-card .button,
.generate-trip-btn,
.traveler-card .options button{


background:

linear-gradient(
135deg,
#b59cff,
#8fdcff
);


border:none;


border-radius:999px;


padding:12px 25px;


color:white;


font-weight:600;


cursor:pointer;


text-decoration:none;


box-shadow:

0 10px 25px rgba(90,70,170,.2);


transition:.25s ease;

}




.service-card .button{

margin-top:20px;

}




.generate-trip-btn{

margin-top:20px;

}




.service-card .button:hover,
.generate-trip-btn:hover,
.traveler-card .options button:hover{


transform:translateY(-4px);

}




.traveler-card .options{


display:flex;

justify-content:center;

flex-wrap:wrap;

gap:10px;

margin-top:20px;

}



/* ==========================
        MOBILE
========================== */


@media(max-width:768px){


.services-gifting{

padding:65px 15px;

margin:25px 10px;

}



.services-gifting h2{

font-size:2.2rem;

}



.service-cards{

justify-content:flex-start;

width:max-content;

max-width:none;

}



.service-card{

flex:0 0 85vw;

max-width:none;

min-height:auto;

}


}
 /* =====================================
        BRAIN ROT TRAVEL SERIES
===================================== */


.brain-rot-series {

padding:60px 15px;

background:

radial-gradient(
circle at top,
rgba(255,255,255,.7),
transparent
),

linear-gradient(
135deg,
#eee7ff,
#e8f7ff
);


border-radius:30px;

margin:30px 15px;

}





.brain-rot-series h2 {

font-family:'Playfair Display',serif;

font-size:2.3rem;

color:#3b2c70;

}




.brain-rot-series p {

color:#51496d;

font-size:1rem;

}





.brainrot-cards {

display:flex;

gap:20px;

overflow-x:auto;

padding:25px 5px;

scroll-snap-type:x mandatory;

-webkit-overflow-scrolling:touch;

}



.brainrot-cards::-webkit-scrollbar{

display:none;

}





.brainrot-card {


flex:0 0 420px;


background:

rgba(255,255,255,.6);


backdrop-filter:blur(18px);


border-radius:28px;


padding:14px;


border:

1px solid rgba(255,255,255,.7);



box-shadow:

0 18px 35px rgba(60,40,120,.15);


transform:rotate(-1deg);


transition:.3s;


scroll-snap-align:center;


}




.brainrot-card:hover {


transform:

rotate(0deg)
translateY(-5px);


}





.brainrot-card iframe {


width:100%;


height:260px;


border-radius:22px;


}





.brainrot-card p {

font-size:.95rem;

color:#46358b;

font-weight:600;

margin-top:10px;

}





@media(max-width:800px){


.brainrot-card{

flex-basis:85vw;

}



.brainrot-card iframe{

height:230px;

}


}

/* =====================================
      TRAVEL ROUTE SECTION
      ABOUT + CONTACT
===================================== */

.about-section {

padding:80px 25px;

margin:40px 15px;

background:

radial-gradient(
circle at top left,
rgba(198,180,255,.45),
transparent 45%
),

radial-gradient(
circle at bottom right,
rgba(160,210,255,.35),
transparent 45%
),

linear-gradient(
135deg,
#eee8ff,
#eaf7ff
);

border-radius:45px;

overflow:hidden;

position:relative;

}


/* subtle glow */

.about-section::before {

content:"";

position:absolute;

width:280px;

height:280px;

top:-120px;

right:-100px;

background:
rgba(181,160,255,.25);

border-radius:50%;

filter:blur(70px);

}



/* LAYOUT */

.journal-spread {

max-width:1050px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

position:relative;

z-index:2;

}



/* CARD BASE */

.about-card,
.contact-panel {

background:

rgba(255,255,255,.35);

backdrop-filter:blur(20px);


border-radius:32px;


padding:45px 35px;


border:

1px solid rgba(255,255,255,.65);


box-shadow:

0 20px 45px rgba(70,50,120,.14);


position:relative;


transition:.3s ease;

}



/* make them feel connected */

.about-card {

border-top-right-radius:20px;

}



.contact-panel {

border-top-left-radius:20px;

}




.about-card:hover,
.contact-panel:hover {

transform:translateY(-8px);

box-shadow:

0 30px 60px rgba(70,50,120,.20);

}



/* little top accent */

.about-card::before,
.contact-panel::before {

content:"";

position:absolute;

top:0;

left:50%;

transform:translateX(-50%);

width:90px;

height:4px;

border-radius:20px;

background:

linear-gradient(
90deg,
#9b7cff,
#7ddcff
);

}



/* TEXT */

.about-card h3,
.contact-card h3 {

font-family:'Playfair Display',serif;

font-size:2rem;

color:#423178;

margin-bottom:15px;

}



.about-card p,
.contact-card p {

color:#5f577d;

line-height:1.8;

}




/* BUTTONS */

.about-btn,
.contact-card .button {

display:inline-block;

margin-top:20px;

background:

linear-gradient(
135deg,
#9b7cff,
#7ddcff
);

color:white;

padding:13px 30px;

border-radius:999px;

font-weight:600;

text-decoration:none;


box-shadow:

0 10px 25px rgba(90,70,170,.2);


transition:.25s;

}


.about-btn:hover,
.contact-card .button:hover {

transform:translateY(-3px);

}



/* MOBILE */

@media(max-width:768px){


.journal-spread {

grid-template-columns:1fr;

gap:25px;

}



.about-card,
.contact-panel {

padding:35px 25px;

border-radius:32px;

}



.about-card:hover,
.contact-panel:hover {

transform:translateY(-5px);

}


}
/* ===================================
             FOOTER
=================================== */

.rr-footer{

padding:28px 20px;

background:
linear-gradient(
135deg,
#33245f,
#405d91
);

color:white;

border-radius:30px 30px 0 0;

box-shadow:
0 -10px 25px rgba(50,40,100,.15);

}

.footer-content{

max-width:900px;

margin:auto;

text-align:center;

}

/* Logo / Name */

.footer-title{

font-family:'Playfair Display',serif;

font-size:1.5rem;

margin-bottom:5px;

color:white;

}

/* Tagline */

.footer-tagline{

font-size:.85rem;

max-width:450px;

margin:0 auto 15px;

line-height:1.5;

color:rgba(255,255,255,.75);

}

/* Quick Links */

.footer-socials{

display:flex;

justify-content:center;

gap:14px;

flex-wrap:wrap;

margin:15px 0;

}

.footer-socials a{

font-size:.9rem;

color:white;

opacity:.9;

transition:.25s;

}

.footer-socials a:hover{

opacity:1;

transform:translateY(-2px);

}

/* Policies */

.footer-links{

display:flex;

justify-content:center;

gap:12px;

flex-wrap:wrap;

padding:0;

margin:10px 0;

list-style:none;

}

.footer-links button{

background:none;

border:none;

color:#d9ccff;

font-size:.8rem;

cursor:pointer;

padding:0;

}

/* Copyright */

.footer-copy{

font-size:.75rem;

color:rgba(255,255,255,.55);

margin-top:12px;

}

/* Mobile */

@media(max-width:700px){

.footer-socials{

gap:10px;

}

.footer-title{

font-size:1.3rem;

}

}

/* ===================================
          IMAGE LIGHTBOX
=================================== */


#lightbox {

display:none;

position:fixed;

inset:0;

z-index:99999;


background:

rgba(25,20,50,.75);


backdrop-filter:blur(12px);


justify-content:center;

align-items:center;

padding:25px;

}



#lightbox.active {

display:flex;

}




#lightbox img {


max-width:85vw;

max-height:80vh;


width:auto;

height:auto;


object-fit:contain;


border-radius:25px;


box-shadow:

0 25px 60px rgba(0,0,0,.35);


}




#lightbox .close-btn {


position:absolute;


top:25px;

right:30px;


font-size:40px;


line-height:1;


color:white;


background:none;


border:none;


cursor:pointer;


z-index:100000;

}




@media(max-width:700px){


#lightbox img {


max-width:92vw;

max-height:75vh;


border-radius:18px;

}


#lightbox .close-btn {


top:15px;

right:20px;


font-size:32px;

}


}


/* ===================================
          PDF MODAL
=================================== */


.pdf-modal{

display:none;

position:fixed;

inset:0;

z-index:99999;

background:

rgba(30,20,70,.55);

backdrop-filter:blur(12px);

justify-content:center;

align-items:center;

padding:20px;

}


/* SHOW MODAL */

.pdf-modal.active{

display:flex;

}



/* PDF WINDOW */

.pdf-modal-content{

width:90%;

max-width:600px;

background:white;

border-radius:30px;

padding:25px;

position:relative;

box-shadow:

0 25px 60px rgba(0,0,0,.25);

}


/* CLOSE BUTTON */

.pdf-close{

position:absolute;

top:15px;

right:18px;

background:none;

border:none;

font-size:30px;

cursor:pointer;

color:#4b3c9f;

z-index:2;

}


/* PREVIEW IMAGE */

#pdfImage{

width:100%;

max-height:70vh;

object-fit:contain;

border-radius:20px;

}



/* PAGE BUTTONS */

.pdf-nav{

display:flex;

justify-content:center;

gap:15px;

margin-top:20px;

}


.pdf-nav button{

background:

linear-gradient(
135deg,
#9b7cff,
#7ddcff
);

color:white;

border:none;

border-radius:999px;

padding:10px 22px;

cursor:pointer;

}


/* MOBILE */

@media(max-width:700px){

.pdf-modal-content{

padding:18px;

border-radius:25px;

}


#pdfImage{

max-height:60vh;

}

}

/* ===============================
   Travel Notes Popup Card
================================ */


.magazine-card {

    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 340px;
    max-width: calc(100vw - 40px);

    padding: 25px;

    background:
    linear-gradient(
        135deg,
        rgba(181,160,255,.55),
        rgba(120,170,255,.35)
    );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-radius: 28px;

    border: 1px solid rgba(255,255,255,.25);

    box-shadow:
    0 25px 60px rgba(60,40,120,.35);

    color:white;

    z-index:99999;


    /* hidden until JS adds show */

    opacity:0;

    visibility:hidden;

    transform:translateY(60px);

    transition:
    opacity .5s ease,
    transform .5s ease,
    visibility .5s ease;

}


/* Popup appears */

.magazine-card.show {

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



.magazine-card-content h3 {

    margin-top:10px;

    font-family:"Playfair Display", serif;

    font-size:28px;

}



.magazine-card-content p {

    line-height:1.5;

    color:rgba(255,255,255,.85);

}



.magazine-label {

    font-size:14px;

    letter-spacing:.5px;

}



.magazine-card-close {

    position:absolute;

    top:12px;

    right:12px;


    width:32px;

    height:32px;


    border-radius:50%;


    border:none;


    background:rgba(255,255,255,.2);


    color:white;


    cursor:pointer;

}




.magazine-btn {

    margin-top:15px;

    padding:12px 22px;

    border-radius:999px;

    border:none;

    cursor:pointer;


    background:rgba(255,255,255,.25);

    color:white;

    backdrop-filter:blur(10px);

}



/* ===============================
   Magazine Viewer Popup
================================ */


.magazine-overlay {

    position:fixed;

    inset:0;

    z-index:99998;


    display:none;


    justify-content:center;

    align-items:center;


    padding:20px;


    background:
    rgba(20,15,50,.55);


    backdrop-filter:blur(10px);

}



.magazine-overlay.active {

    display:flex;

}




.magazine-window {


    position:relative;


    width:min(850px,90vw);

    max-height:90vh;


    padding:20px;


    display:flex;

    justify-content:center;

    align-items:center;


    overflow:hidden;


    background:

    linear-gradient(
        135deg,
        rgba(181,160,255,.45),
        rgba(120,170,255,.3)
    );


    backdrop-filter:blur(20px);


    border-radius:32px;


    box-shadow:
    0 30px 80px rgba(0,0,0,.35);

}




#magazineImage {


    display:block;


    width:100%;


    max-width:750px;


    max-height:75vh;


    height:auto;


    object-fit:contain;


    border-radius:18px;

}



/* arrows */

.magazine-arrow {

    position:absolute;


    top:50%;

    transform:translateY(-50%);


    width:45px;

    height:45px;


    border:none;


    border-radius:50%;


    background:rgba(255,255,255,.25);


    color:white;


    cursor:pointer;


    z-index:5;

}



.magazine-arrow.left {

    left:15px;

}



.magazine-arrow.right {

    right:15px;

}




.magazine-close {


    position:absolute;


    top:12px;

    right:12px;


    width:38px;

    height:38px;


    border-radius:50%;


    border:none;


    background:rgba(255,255,255,.25);


    color:white;


    font-size:22px;


    z-index:5;


}
/* Make close buttons clickable */

.magazine-card-close,
.magazine-close {

    position:absolute;

    z-index:9999999;

    cursor:pointer;

    pointer-events:auto;

}


/* Card close X */

.magazine-card-close {

    top:10px;

    right:10px;

}


/* Viewer close X */

.magazine-close {

    top:12px;

    right:12px;

}
</style> 
